PRACTICE

Canvas Interaction

Click/touch and drag to draw. Use tools & controls, then assert via action log or export.

Automation tip: canvas pixels aren’t DOM-accessible; assert by screenshot or by the action log. Hooks: #log[data-ops-count], #status[data-last-action], #canvas[data-has-drawing].

Tool Pen Dot (click) Rectangle

Color

Brush

Tip: Use Pen for freehand, Dot for single taps, Rectangle for drag shapes.

How to use

• Pen: click/touch & drag to draw
• Dot: click/touch to place a dot
• Rectangle: click/touch & drag to draw a rectangle
• Undo: remove last action
• Clear: clear the whole canvas
• Export: downloads PNG snapshot

For automation, assert by screenshot or by action log.

Last action: None

Last pointer: x=0, y=0

Action log (for assertions)

[]